<!-- src/components/SearchBar.vue -->
<template>
  <div class="search-bar">
    <div class="search-input-group">
      <input v-model="searchQuery" type="text" placeholder="搜索酒品名称、类型..." class="search-input" @keyup.enter="handleSearch" />
      <button class="btn btn-secondary" @click="handleReset">重置</button>
      <button class="search-btn" @click="handleSearch">🔍 搜索</button>
    </div>

    <div class="filters" v-if="showFilters">
      <div class="filter-group">
        <label>类型:</label>
        <select v-model="filters.type">
          <option value="all">全部</option>
          <option value="纯白酒">纯白酒</option>
          <option value="玉米酒">玉米酒</option>
          <option value="高粱酒">高粱酒</option>
          <option value="金樱子酒">金樱子酒</option>
        </select>
      </div>

      <div class="filter-group">
        <label>度数:</label>
        <select v-model="filters.origin">
          <option value="all">全部</option>
          <option value="50以上">50以上</option>
          <option value="40~50">40~50</option>
          <option value="30~40">30~40</option>
          <option value="30以下">30以下</option>
          <option value="米酿">米酿</option>
        </select>
      </div>

      <div class="filter-group">
        <label>价格范围:</label>
        <div class="price-range">
          <input v-model="filters.minPrice" type="number" placeholder="最低价" class="price-input" />
          <span>-</span>
          <input v-model="filters.maxPrice" type="number" placeholder="最高价" class="price-input" />
        </div>
      </div>

      <button class="btn btn-secondary" @click="applyFilters">应用筛选</button>

      <button class="btn btn-secondary" @click="clearFilters">清除筛选</button>
    </div>

    <div class="filter-toggle">
      <button class="btn btn-secondary" @click="toggleFilters">
        {{ showFilters ? '隐藏筛选' : '显示筛选' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const searchQuery = ref('')
const showFilters = ref(false)

const props = defineProps({
  resetKey: Number
})

const emit = defineEmits(['search', 'filter', 'reset'])

const filters = reactive({
  type: 'all',
  origin: 'all',
  minPrice: '',
  maxPrice: ''
})

const handleSearch = () => {
  emit('search', searchQuery.value)
}

const applyFilters = () => {
  const filterData = {
    type: filters.type,
    origin: filters.origin,
    minPrice: filters.minPrice ? Number(filters.minPrice) : null,
    maxPrice: filters.maxPrice ? Number(filters.maxPrice) : null
  }
  emit('filter', filterData)
}

const clearFilters = () => {
  filters.type = 'all'
  filters.origin = 'all'
  filters.minPrice = ''
  filters.maxPrice = ''
  applyFilters()
}

const toggleFilters = () => {
  showFilters.value = !showFilters.value
  clearFilters()
}

const handleReset = () => {
  searchQuery.value = ''
  clearFilters()
  emit('reset')
}

// ✅ 监听 resetKey，每次变化就清空搜索输入和筛选条件
watch(
  () => props.resetKey,
  () => {
    searchQuery.value = ''
    clearFilters()
  }
)
</script>

<style scoped>
.search-bar {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #8b4513;
}

.search-btn {
  padding: 12px 24px;
  background-color: #8b4513;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  white-space: nowrap;
}

.search-btn:hover {
  background-color: #a0522d;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: end;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  min-width: 120px;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-input {
  width: 80px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.filter-toggle {
  text-align: center;
  margin-top: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

@media (max-width: 768px) {
  .search-input-group {
    flex-direction: column;
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
  }

  .filter-group select,
  .price-input {
    width: 100%;
    min-width: auto;
  }

  .price-range {
    flex-direction: column;
  }
}
</style>
